<link rel="stylesheet" href="css/index.css"/>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/menu.js"></script>

<div id="app" style="height: 100%;">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">位置</el-breadcrumb-item>
        <el-breadcrumb-item>财务收支</el-breadcrumb-item>
        <el-breadcrumb-item>收款登记</el-breadcrumb-item>
    </el-breadcrumb>
    <br/>
    <el-menu
            :default-active="activeIndex3"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1" value="1">货到付款</a></el-menu-item>
        <el-menu-item index="2" value="2">款到发货</a></el-menu-item>
        <el-menu-item index="3" value="3">预付款到发货</a></el-menu-item>
    </el-menu>
    <el-table :data="tableData" height="425px" border style="width: 100%">
        <el-table-column  prop="soId" label="销售单编号" width="180">
            <template slot-scope="scope">
                <el-button type="text" @click="showDetails(scope.row.soId)">{{scope.row.soId}}</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="customerName" label="客户名称" width="180"></el-table-column>
        <el-table-column prop="account" label="创建用户" width="180"></el-table-column>
        <el-table-column prop="tipFee" label="附加费用" width="180"></el-table-column>
        <el-table-column prop="productTotal" label="销售产品总价" width="180"></el-table-column>
        <el-table-column prop="soTotal" label="销售单总价格" width="180"></el-table-column>
        <el-table-column prop="payType" label="付款方式" width="180">
            <template slot-scope="scope">
                <span v-if="scope.row.payType==1">货到付款</span>
                <span v-else-if="scope.row.payType==2">款到发货</span>
                <span v-else-if="scope.row.payType==3">预付款发货</span>
            </template>
        </el-table-column>
        <el-table-column prop="prePayFee" label="最低预付款金额" width="180"></el-table-column>
        <el-table-column prop="status" label="处理状态" width="180">
            <template slot-scope="scope">
                <span v-if="scope.row.status==1">新建</span>
                <span v-else-if="scope.row.status==2">收货</span>
                <span v-else-if="scope.row.status==3">付款</span>
                <span v-else-if="scope.row.status==4">了结</span>
                <span v-else-if="scope.row.status==5">预付</span>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
            <template slot-scope="scope">
                <el-button @click="imMoneyStatus(scope.row.soId)" size="medium" type="text">收款</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog title="采购单明细" :visible.sync="dialogTableVisible" width="840">
        <el-table :data="gridData">
            <el-table-column property="soId" label="采购单编号" width="180"></el-table-column>
            <el-table-column property="productName" label="商品名称" width="140"></el-table-column>
            <el-table-column property="unitPrice" label="单价" width="120"></el-table-column>
            <el-table-column property="num" label="数量" width="120"></el-table-column>
            <el-table-column property="unitName" label="单位" width="120"></el-table-column>
            <el-table-column property="itemPrice" label="产品总价"></el-table-column>
        </el-table>
    </el-dialog>
    <el-pagination
            background
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            @current-change="handleCurrentChange"
            @size-change="handleSize"
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[6,10,15,20]"
            :total="totalRecord" >
    </el-pagination>

    <!--供应商弹框-->
</div>

<script>
    window.onload = function () {

        let vm = new Vue({
            el: "#app",
            data: {
                labelPosition: "left",
                dialogFormVisible: false,
                dialogTableVisible: false,
                tableData: [],
                gridData: [],
                form: {
                    soId: "",  //采购单编号
                    customerCode: "", //供应商编号
                    account: "",    //用户账号
                    createTime: "", //创建时间
                    tipFee: 0,  //附加费用
                    productTotal: 0,    //产品总价
                    soTotal: 0,  // 总价格
                    payType: "",  // 付款方式
                    prePayFee: 0, //最低预付款金额
                    status: "",  //处理状态
                    remark: "",  //备注
                    customerName: "", //供应商名称
                    soitems: []
                },
                index: 1,
                currentPage: 1,
                totalRecord: 0,
                pageSize: 5,
                activeIndex3:"",
                outbound:""
            },
            methods: {
                init: function () {
                    this.handleSelect(this.index);
                },
                getData: function (curP, pSize) {
                    let that = this;
                },
                handleCurrentChange: function (val) {
                    this.currentPage = val;
                    this.handleSelect();

                },
                handleSize: function (val) {
                    this.pageSize = val;
                    this.currentPage = 1;
                    this.handleSelect();
                },
                handleSelect: function (index) {
                    let that = this;
                    this.payType = index;
                    console.log(index);

                    axios.get("getInMoneyPage?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize + "&payType=" + index).then(function (resp) {
                        that.tableData = resp.data.lists;
                        that.totalRecord = resp.data.totalRecord;
                        console.log(that.tableData);
                    });

                },
                //展示明细表
                showDetails: function (soId) {
                    let that = this;
                    this.outbound=soId;
                    this.dialogTableVisible = true;
                    axios.get("getSoItemsBySoId/" + soId).then(function (resp) {
                        console.log(resp.data.data)
                        that.gridData = resp.data.data;
                    });
                },
                imMoneyStatus: function (soId) {
                    if (window.confirm("确认收款?")) {
                        let that = this;
                        console.log(this.soId);
                        axios.get("updateInMoney?soId="+soId).then(function (resp) {
                            console.log(resp.data)
                            if (resp.data.code = 200) {
                                that.$message({
                                    showClose: true,
                                    message: '恭喜你，收款成功',
                                    type: 'success',
                                    duration: "1000"
                                });

                                that.init();
                            } else {
                                that.$message({
                                    showClose: true,
                                    message: '收款失败',
                                    type: 'success',
                                    duration: "1000"
                                });
                            }
                        });
                    }
                },

            }
        });

        vm.init();
    }
</script>